<div class="element-cdk-virtual-list page-layout card">
    <div class="content center mt-32">
        <div fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between start">
            <div class="example-wrap" fxFlex="50" fxFlex.lt-md="100">
                <h3 class="example-title">BASIC</h3>
                <div class="example">
                    <cdk-virtual-scroll-viewport itemSize="90" class="example-viewport">
                        <div *cdkVirtualFor="let item of items; let i = index;" class="example-item">
                            <code># {{i}}:</code> Aspernatur, disserendi tempora initiis tria sitne vituperata consentientis timiditatem plus, idque reprehendunt eveniet curiosi dixerit pararetur recte defendere obruamus excruciant, fames. Maior, disserendi philosophorum, probantur geometriaque vetuit militaris, istis pars porrecta, litteras possit sententia, liquidae conducunt atqui istis cognosci philosophi ignorare tutiorem, statua consumeret idcirco.
                        </div>
                    </cdk-virtual-scroll-viewport>
                </div>
            </div>
            <div class="example-wrap" fxFlex="50" fxFlex.lt-md="100">
                <h3 class="example-title">HORIZONTAL</h3>
                <div class="example horizontal-example">
                    <cdk-virtual-scroll-viewport orientation="horizontal" itemSize="90" class="example-viewport">
                        <div *cdkVirtualFor="let item of items; let i = index;" class="example-item">
                            <code># {{i}}:</code> Aspernatur, disserendi tempora initiis tria sitne vituperata consentientis timiditatem plus, idque reprehendunt eveniet curiosi dixerit pararetur recte defendere obruamus excruciant, fames. Maior, disserendi philosophorum, probantur geometriaque vetuit militaris, istis pars porrecta, litteras possit sententia, liquidae conducunt atqui istis cognosci philosophi ignorare tutiorem, statua consumeret idcirco.
                        </div>
                    </cdk-virtual-scroll-viewport>
                </div>
            </div>
        </div>
        <div fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between start">
            <div class="example-wrap" fxFlex="1 0 auto" fxFlex.lt-md="100">
                <h3 class="example-title">INVERSE SKIN</h3>
                <div class="example dark">
                    <cdk-virtual-scroll-viewport itemSize="90" class="example-viewport h-356">
                        <div *cdkVirtualFor="let item of items; let i = index;" class="example-item">
                            <code># {{i}}:</code> Aspernatur, disserendi tempora initiis tria sitne vituperata consentientis timiditatem plus, idque reprehendunt eveniet curiosi dixerit pararetur recte defendere obruamus excruciant, fames. Maior, disserendi philosophorum, probantur geometriaque vetuit militaris, istis pars porrecta, litteras possit sententia, liquidae conducunt atqui istis cognosci philosophi ignorare tutiorem, statua consumeret idcirco.
                        </div>
                    </cdk-virtual-scroll-viewport>
                </div>
            </div>
            <div class="example-wrap" fxFlex="1 0 auto" fxFlex.lt-md="100">
                <h3 class="example-title">DYNAMIC CONTENT</h3>
                <button class="mt-20" mat-raised-button color="accent" (click)="appendContent()">APPEND CONTENT</button>
                <div class="example">
                    <cdk-virtual-scroll-viewport itemSize="90" class="example-viewport">
                        <div *cdkVirtualFor="let con of content; let i = index;" class="example-item">
                            <code># {{i}}:</code> Aspernatur, disserendi tempora initiis tria sitne vituperata consentientis timiditatem plus, idque reprehendunt eveniet curiosi dixerit pararetur recte defendere obruamus excruciant, fames. Maior, disserendi philosophorum, probantur geometriaque vetuit militaris, istis pars porrecta, litteras possit sententia, liquidae conducunt atqui istis cognosci philosophi ignorare tutiorem, statua consumeret idcirco.
                        </div>
                    </cdk-virtual-scroll-viewport>
                </div>
            </div>
        </div>
        <div class="example-wrap">
            <h3 class="example-title">API OPERATION</h3>
            <div fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between start">
                <div fxFlex="70" fxFlex.lt-md="100" fxFlexOrder.lt-md="2">
                    <div class="example">
                        <cdk-virtual-scroll-viewport itemSize="140" class="example-viewport" #scroll>
                            <div *cdkVirtualFor="let item of items; let i = index;" class="example-item h-140">
                                <code># {{i}}:</code> Aspernatur, disserendi tempora initiis tria sitne vituperata consentientis timiditatem plus, idque reprehendunt eveniet curiosi dixerit pararetur recte defendere obruamus excruciant, fames. Maior, disserendi philosophorum, probantur geometriaque vetuit militaris, istis pars porrecta, litteras possit sententia, liquidae conducunt atqui istis cognosci philosophi ignorare tutiorem, statua consumeret idcirco.
                            </div>
                        </cdk-virtual-scroll-viewport>
                    </div>
                </div>
                <div class="buttons p-24" fxFlex="30" fxFlex.lt-md="100">
                    <button mat-raised-button color="accent" (click)="scroll.scrollToIndex(0, 'smooth')">Scroll to index：0</button>
                    <br>
                    <button mat-raised-button color="accent" (click)="scroll.scrollToIndex(30, 'smooth')">Scroll to index：30</button>
                    <br>
                    <button mat-raised-button color="accent" (click)="scroll.scrollTo({ top: 0 })">Scroll to 0</button>
                    <br>
                    <button mat-raised-button color="accent" (click)="scroll.scrollTo({ top: 1000 })">Scroll to 1000</button>
                    <br>
                    <button mat-raised-button color="accent" (click)="scroll.scrollToOffset(0, 'smooth')">Scroll to offset：0</button>
                    <br>
                    <button mat-raised-button color="accent" (click)="scroll.scrollToOffset(2000, 'smooth')">Scroll to offset：2000</button>
                </div>
            </div>
        </div>
        <div class="example-wrap">
            <h3 class="example-title">SORT</h3>
            <div class="buttons pt-20">
                <button mat-raised-button color="accent" (click)="sortBy('name')">Sort by state name</button>
                <button mat-raised-button color="accent" (click)="sortBy('capital')">Sort by state capital</button>
            </div>
            <div fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between start">
                <div fxFlex="50" fxFlex.lt-md="100">
                    <div class="example">
                        <ng-container *ngIf="states |async as allStates">
                            <cdk-virtual-scroll-viewport [itemSize]="61" class="list-container">
                                <div *cdkVirtualFor="let state of allStates;" class="list-group-item">
                                    <div class="state">{{state.name}}</div>
                                    <div class="capital">{{state.capital}}</div>
                                </div>
                            </cdk-virtual-scroll-viewport>
                        </ng-container>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>